import React, { useState } from 'react';
import { Space, Table, Modal, Form, Input, Select, message } from 'antd';
import type { TableProps } from 'antd';

// 定义课程数据类型
interface CourseDataType {
  id: number; // 唯一标识
  week_day: string; // 周几（周一到周五）
  time: number; // 第几节课（1-5）
  name: string; // 课程名称
  teacher: string; // 授课教师
  place: string; // 上课地点
}

interface CourseTableProps {
  dataSource: CourseDataType[];
  onUpdate?: (course: CourseDataType) => void;
  onDelete?: (id: number) => void;
}

const CourseTable: React.FC<CourseTableProps> = ({ dataSource, onUpdate, onDelete }) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editingCourse, setEditingCourse] = useState<CourseDataType | null>(null);
  const [form] = Form.useForm();

  const handleEdit = (record: CourseDataType) => {
    setEditingCourse(record);
    form.setFieldsValue(record);
    setIsModalVisible(true);
  };

  const handleDelete = (record: CourseDataType) => {

        onDelete?.(record.id);
        message.success('删除成功');
    }
  

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      if (editingCourse) {
        onUpdate?.({ ...editingCourse, ...values });
        message.success('更新成功');
        setIsModalVisible(false);
        form.resetFields();
        setEditingCourse(null);
      }
    } catch (error) {
      console.error('验证失败:', error);
    }
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    form.resetFields();
    setEditingCourse(null);
  };

  const columns: TableProps<CourseDataType>['columns'] = [
    {
      title: '课程id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '星期',
      dataIndex: 'week_day',
      key: 'week_day',
    },
    {
      title: '节次',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '课程名称',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <span className="text-blue-600 hover:text-blue-800">{text}</span>,
    },
    {
      title: '授课教师',
      dataIndex: 'teacher',
      key: 'teacher',
    },
    {
      title: '上课地点',
      dataIndex: 'place',
      key: 'place',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <button
            onClick={() => handleEdit(record)}
            className="px-4 py-2 text-blue-500 hover:text-blue-700 transition-colors font-medium"
          >
            编辑
          </button>
          <button
            onClick={() => handleDelete(record)}
            className="px-4 py-2 text-red-500 hover:text-red-700 transition-colors font-medium"
          >
            删除
          </button>
        </Space>
      ),
    },
  ];

  return (
    <>
      <Table<CourseDataType> columns={columns} dataSource={dataSource}
            pagination={{
              showQuickJumper: true,
              showSizeChanger: true,
            }} />
      
      <Modal
        title="编辑课程信息"
        open={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="保存"
        cancelText="取消"
        width={520}
      >
        <Form
          form={form}
          layout="vertical"
        >
          <Form.Item
            name="id"
            label="课程id"
            rules={[{ required: true, message: '课程id不可更改' }]}
          >
              <Input disabled />
          </Form.Item>

          <Form.Item
            name="week_day"
            label="星期"
            rules={[{ required: true, message: '请选择上课星期' }]}
          >
            <Select>
              <Select.Option value={1}>周一</Select.Option>
              <Select.Option value={2}>周二</Select.Option>
              <Select.Option value={3}>周三</Select.Option>
              <Select.Option value={4}>周四</Select.Option>
              <Select.Option value={5}>周五</Select.Option>
            </Select>
          </Form.Item>
          
          <Form.Item
            name="time"
            label="节次"
            rules={[{ required: true, message: '请选择上课节次' }]}
          >
            <Select>
              <Select.Option value={1}>第1节</Select.Option>
              <Select.Option value={2}>第2节</Select.Option>
              <Select.Option value={3}>第3节</Select.Option>
              <Select.Option value={4}>第4节</Select.Option>
              <Select.Option value={5}>第5节</Select.Option>
            </Select>
          </Form.Item>
          
          <Form.Item
            name="name"
            label="课程名称"
            rules={[{ required: true, message: '请输入课程名称', whitespace: true }]}
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            name="teacher"
            label="授课教师"
            rules={[{ required: true, message: '请输入授课教师姓名', whitespace: true }]}
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            name="place"
            label="上课地点"
            rules={[{ required: true, message: '请输入具体上课地点', whitespace: true }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default CourseTable;